<template name="my-imgUpload">
	<view :style="$s.view_color">
		<view class="up-box">
			<!-- 自定义上传图标 -->
			<block v-if="$slots.default || $slots.$default">
				<my-u-upload
					:fileList="file_list"
					@afterRead="afterRead"
					@delete="deletePic"
					multiple
					:name="name"
					:width="width!=''?width:picSize"
					:height="height!=''?height:picSize"
					:maxCount="maxCount"
					:previewFullImage="true"
				><slot/></my-u-upload>
			</block>
			<!-- 不设置用默认的选项 -->
			<block v-else>
				<my-u-upload
					:fileList="file_list"
					@afterRead="afterRead"
					@delete="deletePic"
					multiple
					:name="name"
					:width="width!=''?width:picSize"
					:height="height!=''?height:picSize"
					:maxCount="maxCount"
					:previewFullImage="true"
				></my-u-upload>
			</block>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import $file from "@/common/file"
	export default {
		name: 'my-imgUpload',
		props: {
			files:{
				type:[String,Array],
				default:[]
			},
			name:{
				type:[String],
				default:'file'
			},
			title:{
				type:[String],
				default:''
			},
			//图片大小
			picSize:{
				type:[String,Number],
				default:80,
			},
			//最大上传数		数组设置的MAX比默认的优先级高
			maxCount:{
				type:[String,Number],
				default:20,
			},
			//标题字体大小
			fontSize:{
				type:[String,Number],
				default:'28',
			},
			// 扩展数据
			extData:{
				type:[Object,Array,String,Number],
				default:'',
			},
			width:{
				type:[String,Number],
				default:'',
			},
			height:{
				type:[String,Number],
				default:'',
			}
		},
		data() {
			return {
				file_list:[],
			};
		},
		watch: {
			// 传入参数格式
			files:{
				handler(val){
					let vals=typeof val=='string'?val.split(','):val;
					let urls=[];
					if(vals!=null && vals!=undefined && vals!=''){
						vals.forEach((u)=>{
							urls.push({
								url:u
							});
						});
					}
					this.file_list = urls;
				},
				immediate:true,
				deep:true,			// 深度监控
			},
		},
		computed: {
			...mapState({
				$s:state => state.$style,
			})
		},
		created() {
			
		},
		methods: {
			//删除图片
			deletePic(event) {
				this.file_list.splice(event.index, 1);	
				this.upChange();
			},
			//上传图片
			async afterRead(event){
				this.file_list= await $file.multipleUpload(event,this.file_list);
				this.upChange();
			},
			//返回图片数据
			upChange(){
				let imgs='';
				let updata=[];
				this.file_list.forEach((item)=>{
					updata.push(item.url)
				})
				imgs=updata.join(',');
				
				// console.log(imgs);
				
				this.$emit('upChange',{img:imgs,ext:this.extData});
			}
		}
	};
</script>

<style lang="scss">
	.up-list{
		display: block;
		background: #fff;
		border-radius: 20rpx;
	}
	.up-box{
		margin: 10rpx auto;
	}
</style>

